<template>
	<view class="content">
		<view class="header">
			<uni-search-bar placeholder="请输入内容搜索" bgColor="white" cancelButton="none"   @confirm="search"  v-model="searchValue"  @input="input"
				@cancel="cancel" @clear="clear"></uni-search-bar>
		</view>
		<scroll-view 
		:refresher-enabled="true"
		:refresher-triggered="isRefreshing"
		    @refresherrefresh="handleRefresh"
				refresher-default-style="none"
				:scroll-top="scrollViewTop"
				@scroll="viewScroll"
				:scroll-with-animation="true"
		 class="home-body loadScrollView" scroll-y @scrolltolower="scrolltolower">
			 <view slot="refresher" style="width: 100%;text-align: center;">
				<top-load-more :loadMoreStatus="loadMoreStatus"></top-load-more>
			 </view>
			<shop-waterfall  :list="list"></shop-waterfall>
			<up-loadmore  :status="loadStatus"></up-loadmore>
		</scroll-view>
		 <BackTop @click="backTop" :scroll-top="scrollTop"></BackTop>
	</view>
</template>

<script setup>
import { computed, ref,reactive } from 'vue';
import { useStore } from 'vuex';
import { onLoad, onShow, onHide } from '@dcloudio/uni-app';
import ShopWaterfall from "@/components/index/shop-waterfall.vue";
import TopLoadMore from "@/components/TopLoadMore.vue";
import BackTop from "@/components/BackTop.vue";
const store = useStore();
const title = ref('测试');
const scrollRef = ref();
const list = ref([
	{
		id:1,
		price: 35,
		title: '北国风光，千里冰封，万里雪飘',
		shop: '李白杜甫白居易旗舰店',
		image: 'http://pic.sc.chinaz.com/Files/pic/pic9/202002/zzpic23327_s.jpg',
	},
	{
		id:2,
		price: 75,
		title: '望长城内外，惟余莽莽',
		shop: '李白杜甫白居易旗舰店',
		image: 'http://pic.sc.chinaz.com/Files/pic/pic9/202002/zzpic23325_s.jpg',
	},
	{
		id:3,
		price: 385,
		title: '大河上下，顿失滔滔',
		shop: '李白杜甫白居易旗舰店',
		image: 'http://pic.sc.chinaz.com/Files/pic/pic9/202002/zzpic23325_s.jpg',
	},
	{
		id:4,
		price: 784,
		title: '欲与天公试比高',
		shop: '李白杜甫白居易旗舰店',
		image: 'http://pic.sc.chinaz.com/Files/pic/pic9/202002/zzpic23325_s.jpg',
	},
	{
		id:5,
		price: 7891,
		title: '须晴日，看红装素裹，分外妖娆',
		shop: '李白杜甫白居易旗舰店',
		image: 'http://pic.sc.chinaz.com/Files/pic/pic9/202002/zzpic23325_s.jpg',
	},
	{
		id:6,
		price: 2341,
		shop: '李白杜甫白居易旗舰店',
		title: '江山如此多娇，引无数英雄竞折腰',
		image: 'http://pic.sc.chinaz.com/Files/pic/pic9/202002/zzpic23325_s.jpg',
	},
	{
		id:7,
		price: 661,
		shop: '李白杜甫白居易旗舰店',
		title: '惜秦皇汉武，略输文采',
		image: 'http://pic.sc.chinaz.com/Files/pic/pic9/202002/zzpic23325_s.jpg',
	},
	{
		id:8,
		price: 1654,
		title: '唐宗宋祖，稍逊风骚',
		shop: '李白杜甫白居易旗舰店',
		image: 'http://pic.sc.chinaz.com/Files/pic/pic9/202002/zzpic23325_s.jpg',
	},
	{
		id:9,
		price: 1678,
		title: '一代天骄，成吉思汗',
		shop: '李白杜甫白居易旗舰店',
		image: 'http://pic.sc.chinaz.com/Files/pic/pic9/202002/zzpic23325_s.jpg',
	},
	{
		id:10,
		price: 924,
		title: '只识弯弓射大雕',
		shop: '李白杜甫白居易旗舰店',
		image: 'http://pic.sc.chinaz.com/Files/pic/pic9/202002/zzpic23325_s.jpg',
	},
	{
		id:11,
		price: 8243,
		title: '俱往矣，数风流人物，还看今朝',
		shop: '李白杜甫白居易旗舰店',
		image: 'http://pic.sc.chinaz.com/Files/pic/pic9/202002/zzpic23325_s.jpg',
	},
]);
const searchValue = ref('');
const loadStatus = ref('loading');//more|loading|nomore
const loadMoreStatus = ref('more');//more|loading|nomore
const isLoad = ref(false);
const scrollTop = ref(0);
const scrollViewTop = ref(0);
const isRefreshing = ref(false);
// console.info('dd',envVersion)
const count = computed(()=>store.getters.count);

onLoad(()=>{
	console.info('onLoad','页面加载')
	
})
function backTop(){
	scrollViewTop.value = scrollTop.value ;
	//延迟在滚动
	setTimeout(()=>{
		scrollViewTop.value = 0;
	},300)
}
function handleRefresh(){
	isRefreshing.value = true;
	loadMoreStatus.value = 'loading';
	console.info('refresh','触发刷新')
	setTimeout(()=>{
		loadMoreStatus.value = 'nomore';
	},1400)
	setTimeout(()=>{
		isRefreshing.value = false;
		setTimeout(()=>{
			loadMoreStatus.value = 'more';
		},1000)
	},2000)
}

function init(){
	// captchaImage({}).then(res=>{
	// 	// console.info('res',res);
	// })
	// uni.showToast({
	// 	icon:'none',
	// 	title:'提示框'
	// })
}
function viewScroll(e){
	scrollTop.value = e.detail.scrollTop;
}
function scrolltolower(){
	if(isLoad.value) return;
	isLoad.value = true;
	console.info('scrolltolower','到底部了')
	let lastId =  list.value[list.value.length - 1].id;
	let newArr = [];
	for (var i = 0; i < 10; i++) {
		lastId++;
		newArr.push({
			id:lastId,
			price: 8243,
			title: '俱往矣，数风流人物，还看今朝',
			shop: '李白杜甫白居易旗舰店',
			image: 'http://pic.sc.chinaz.com/Files/pic/pic9/202002/zzpic23325_s.jpg',
		})
	}
	setTimeout(()=>{
		list.value = list.value.concat(newArr);
		isLoad.value = false;
	},1500)
	
}
function search(){
	console.info('search',searchValue.value)
}
function input(){
	console.info('input',searchValue.value)
}
function cancel(){
	console.info('cancel',searchValue.value)
}
function clear(){
	console.info('clear',searchValue.value)
}
init();
</script>

<style lang="scss" scoped>
	.content {
		height: 100%;
		width: 100%;
		display: flex;
		flex-direction: column;
		.home-body{
			// padding: 10rpx;
		 //  flex: 1;
			// overflow-y: auto;
		}
	}

  
</style>
